<template>
  <!-- 2. 准备一个具备宽高的DOM容器 -->
  <div class="chart" ref="chartRef"></div>
</template>

<script lang="ts">
export default {
  name: "LineChart",
};
</script>

<script lang="ts" setup>
// 1. 引入echarts js文件
// echarts内部采用分别暴露，引入其分别暴露的所有内容
import * as echarts from "echarts";
import { ref, watch } from "vue";

const props = defineProps<{
  data: number[];
  axis: string[];
}>();

const chartRef = ref();

watch(
  () => props.data,
  () => {
    // 3. 初始化echarts实例
    // 如果类名重复了，图表可能渲染到其他位置去: 使用ref解决
    const myEcharts = echarts.init(chartRef.value);
    // 4. 定义图表配置项
    const option = {
      xAxis: {
        data: props.axis,
        boundaryGap: false, // 坐标轴留白
      },
      yAxis: {
        show: false, // 隐藏y轴
      },
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0,
      },
      series: {
        type: "line",
        data: props.data,
        // 折线拐点样式
        itemStyle: {
          opacity: 0, // 隐藏
        },
        // 是否平滑曲线显示
        smooth: true,
        // 区域填充样式
        areaStyle: {
          color: "#a64ca6",
          opacity: 1,
        },
        // 线条样式。
        lineStyle: {
          color: "#a64ca6",
        },
      },
    };
    // 5. 设置图表配置项，生成图表
    myEcharts.setOption(option);
  }
);
</script>

<style scoped>
.chart {
  width: 100%;
  height: 100%;
}
</style>
